{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>开支管理</title>
    <link href="{% static 'backstage/css/bootstrap.css' %}" rel="stylesheet" />
    <link href="{% static 'backstage/css/font-awesome.css' %}" rel="stylesheet" />
    <link href="{% static 'backstage/css/custom-styles.css' %}" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link href="{% static 'backstage/js/dataTables/dataTables.bootstrap.css' %}" rel="stylesheet" />
    <link rel="stylesheet" href="{% static 'backstage/css/toastr.min.css' %}">
</head>
<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:;"><strong>海与江湖</strong></a>
            </div>

            {% comment %}<h1 class="username">欢迎，&nbsp;{{ username }}</h1>{% endcomment %}

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-expanded="false">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                    	<!-- 消息循环开始 -->
                        <li>
                            <a href="javascript:;">
                                <div>
                                    <strong>John Doe</strong>
                                    <span class="pull-right text-muted">
                                        <em>Today</em>
                                    </span>
                                </div>
                                <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <!-- 消息循环结束 -->
                        <li>
                            <a class="text-center" href="javascript:;">
                                <strong>所有消息</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-expanded="false">
                        <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-tasks">
                    	<!-- 任务循环开始 -->
                        <li>
                            <a href="javascript:;">
                                <div>
                                    <p>
                                        <strong>Task 1</strong>
                                        <span class="pull-right text-muted">60% 完成</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (success)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <!-- 任务循环结束 -->
                        <li>
                            <a class="text-center" href="javascript:;">
                                <strong>查看所有任务</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-expanded="false">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                    	<!-- 提醒循环开始 -->
                        <li>
                            <a href="javascript:;">
                                <div>
                                    <i class="fa fa-comment fa-fw"></i> New Comment
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <!-- 提醒循环结束 -->
                        <li>
                            <a class="text-center" href="javascript:;">
                                <strong>查看所有提醒</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-expanded="false">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="{% url 'backstage:userInfo' %}"><i class="fa fa-user fa-fw"></i>用户资料</a>
                        </li>
                        <li><a href="javascript:;"><i class="fa fa-gear fa-fw"></i>设置</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="{% url 'backstage:userLoginOut' %}"><i class="fa fa-sign-out fa-fw"></i>注销</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    
                    <li>
                        <a href="{% url 'backstage:userAccoundAll' %}" class="active-menu"><i class="fa fa-table"></i>账户管理</a>
                    </li>
					 <li><a href="{% url 'backstage:userInfo' %}"><i class="fa fa-user fa-fw"></i>用户资料</a>
                        </li>
					<!-- 多级下拉菜单控件 -->
                    <li>
                        <a href="javascript:;"><i class="fa fa-sitemap"></i> 餐厅账单管理<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="{% url 'backstage:addmoney' %}">收入管理</a>
                            </li>
                            <li>
                                <a href="{% url 'backstage:paymoney' %}">支出管理</a>
                            </li>
                            <li>
                                <a href="{% url 'backstage:lendmoney' %}">借入管理</a>
                            </li>
                            <li>
                                <a href="{% url 'backstage:borrowmoney' %}">借出管理</a>
                            </li>
                        </ul>
                    </li> 
                </ul>

            </div>
        </nav>
        <div id="page-wrapper" >
		  <div class="header"> 
                        <h1 class="page-header">
                            收入管理 <small>收入查看、添加</small>
                        </h1>
						<ol class="breadcrumb">
                            <form action="{% url 'backstage:addmoney' %}" class="fh5co-form animate-box" data-animate-effect="fadeIn" method="post">
                                {% csrf_token %}
						<div class="form-group">
							<input type="text" class="form-control" id="income" placeholder="收入金额" autocomplete="off" name="name">
                            <input type="text" class="form-control" id="payee" placeholder="收款人" autocomplete="off" name="email">
                            <input type="text" class="form-control" id="item" placeholder="项目" autocomplete="off" name="password">
                            {% comment %}<input type="datetimepicker" class="form-control" id="paydate" placeholder="日期" autocomplete="off" name="repassword">{% endcomment %}
                            <input type="date" id="datetimepicker" name="repassword" class="form-control" >
						</div>
						{% comment %}
                                <div class="form-group">
							<input type="text" class="form-control" id="email" placeholder="收款人" autocomplete="off" name="email">
						</div>
						<div class="form-group">
							<input type="text" class="form-control" id="password" placeholder="项目" autocomplete="off" name="password">
						</div>
						<div class="form-group">
							<input type="text" class="form-control" id="re-password" placeholder="日期" autocomplete="off" name="repassword">
						</div>
                        {% endcomment %}
						<div class="form-group">
							<input type="submit" value="确认添加" class="btn btn-primary">
						</div>
					</form>
					  {% comment %}<li><a href="javascript:;uploadfile()">添加收入</a></li>{% endcomment %}
					  {% comment %}<li><a href="javascript:;">账户管理</a></li>
					  <li><a href="javascript:;">所有账户</a></li>{% endcomment %}
					</ol> 					
		</div>
        <div id="page-inner"> 
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            所有开支
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>收入金额</th>
                                            <th>收款人</th>
                                            <th>项目</th>
                                            <th>日期</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for ceshi in moneyInfo_List %}
                                        <tr class="odd gradeX">
                                            <td>{{ ceshi.amount }}</td>
                                            <td>{{ ceshi.creatUser }}</td>
                                            <td class="center">{{ ceshi.article }}</td>
                                            <td class="center">{{ ceshi.datetime }}</td>
                                            <td>
					                            <a href="#">修改</a>
					                            <a href="javascript:void(0);" id="{{ id }}" onclick="createmodal(this);" title="{{ ceshi.article }},{{ ceshi.datetime }}">删除</a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row user-information">
              <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3 class="user-information-name"></h3>
                    <p class="user-information-email"></p>
                    <p><a href="javascript:;" class="btn btn-danger" role="button" id="deleteUser">删除</a></p>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div class="container">
			<div class="row">
				<div class="col-md-4 col-md-offset-4">

				</div>
			</div>

		</div>
    </div>
    <script src="{% static 'backstage/js/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'backstage/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'backstage/js/jquery.metisMenu.js' %}"></script>
    <script src="{% static 'backstage/js/dataTables/jquery.dataTables.js' %}"></script>
    <script src="{% static 'backstage/js/dataTables/dataTables.bootstrap.js' %}"></script>
    <script src="{% static 'backstage/js/toastr.min.js' %}"></script>
    <script src="{% static 'backstage/js/layer.js' %}"></script>
    <script>
        function uploadfile() {

        }
        toastr.options = { closeButton: !0, debug: !1, newestOnTop: !1, progressBar: !1, positionClass: "toast-bottom-full-width", preventDuplicates: !1, onclick: null, showDuration: "300", hideDuration: "1000", timeOut: "5000", extendedTimeOut: "1000", showEasing: "swing", hideEasing: "linear", showMethod: "slideDown", hideMethod: "fadeOut" }
        $(document).ready(function () {
            $('#dataTables-example').dataTable({
                dom: 'Bfrtip',
                buttons: ['remove']
            });
        });
        $('.get-user').click(
            function () {
                let username = this.innerText;
                $.ajax({
                    url: 'getUser/' + username + '/',
                    type: 'get',
                    success: function (data) {
                        let dataObj = JSON.parse(data);
                        $('.user-information-name').text(dataObj['username']);
                        $('.user-information-email').text(dataObj['email']);
                    }
                })
            }
        );
        $('#deleteUser').click(function () {
            let name = $('.user-information-name').text();
            $.ajax({
                url: 'delUser/' + name + '/',
                type: 'get',
                success: function (data) {
                    let msg;
                    data.responseText?msg = data.responseText:msg = data;
                    toastr.success(msg);
                },
                error: function (data) {
                    let msg;
                    data.responseText?msg = data.responseText:msg = data;
                    toastr.success(msg);
                    setTimeout(function(){
                        window.location.reload();
                    }, 1000)
                }
            });
        });
        setInterval(function () {
            $('.user-information-name').text()?$('.user-information').css('display', 'block'):$('.user-information').css('display', 'none');
        }, 100);
    </script>
    <script src="{% static 'backstage/js/custom-scripts.js' %}"></script>
    
   
</body>
</html>
